<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合选择器</title>
    <style>
        #p1,.c1,.c2{
            color:red;
        }
        .c3 span{
            color:green;
        }
        .c3>span{
            background-color: red;
        }
        .c4+p{
            color:orangered;
        }

        .c4~p{
            background-color: pink;
        }
    </style>
</head>
<body>
<!--
    父元素
        当前元素的上级元素
    子元素
        当前元素标签体中的元素
    祖先元素
        当前元素的父元素、父元素的父元素、父元素的父元素的父元素...
    后代元素(子孙元素)
        当前元素的子元素、子元素的子元素、子元素的子元素的子元素...
    同级元素
        与当前元素处于同一级的元素
    1.多个选择器之间以逗号分隔
        表示所涉及所有选择器匹配的元素均使用指定的样式
    2.多个选择器之间以空格分隔
        先匹配到第一个选择器匹配的所有元素
        找到这些元素中的所有后代元素
        在这些后代元素中通过第二个选择器进行匹配
    3.多个选择器之间以>分隔
        先匹配到第一个选择器匹配的所有元素
        找到这些元素中的所有子元素
        在这些子元素中通过第二个选择器进行匹配
    4.多个选择器之间以+分隔
        先匹配到第一个选择器所匹配到的元素
        找到紧跟着这些元素后面的一个同级元素
        将这些元素使用第二个选择器进行匹配
    5.多个选择器之间以~分隔
        先匹配到第一个选择器所匹配到的元素
        找到跟着这些元素后面的所有同级元素
        将这些元素使用第二个选择器进行匹配
-->
<p id="p1">第1个段落</p>
<p class="c1">第2个段落</p>
<p class="c1">第3个段落</p>
<p class="c2">第4个段落</p>
<p>第5个段落</p>
<div class="c2">第1个div</div>
<div>第2个div</div>
<div>第3个div</div>
<hr>
<div class="c3">
    <span>这是c3中的span</span>
    <span>这是c3中的span</span>
    <span>这是c3中的span</span>
    <p>这是c3的段落</p>
    <p>这是c3的段落</p>
    <p>这是c3的段落</p>
</div>
<div class="c3">
    <div>
        这是c3中的div
        <span>这是c3中的div中的span</span>
    </div>
    <p>这是c3的段落</p>
    <span>这是c3中的div中的span</span>
</div>
<hr>
<div class="c4">这是c4的div</div>
<p>这是段落</p>
<p>这是段落</p>
<span class="c4">这是c4的span</span>
<p>这是段落</p>
<p>这是段落</p>
<span class="c4"></span><br>
<p>这是段落</p>
<p>这是段落</p>
</body>
</html>